<template>
  <div>
      <el-form :inline="true" :model="formInline">
        <el-form-item label="订单号">
            <el-input v-model="formInline.orderId" placeholder="订单号"></el-input>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="formInline.user" placeholder="名称"></el-input>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSelect">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="Id"
            label="ID"
            min-width="100%"
            align="center">
        </el-table-column>
        <el-table-column
            prop="orderId"
            label="订单号"
            min-width="100%"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称"
            min-width="100%"
            align="center">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            min-width="100%">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
       </el-table>
       <el-pagination
            @current-change="currentChange"
            @prev-click="prev"
            @next-click="next"
            layout="prev, pager, next"
            :background="true"
            :page-size="limit"
            :total="total"
            :current-page="currentPage">
        </el-pagination>
  </div>
</template>
<style>
.el-pagination{
    margin-top:1%;
}
</style>

<script>
    export default{
        name:'OrderSelect',
        data(){
            return {
                formInline: {
                    orderId: '',
                    user: ''
                },
                tableData: [],
                loading: false,
                total: 0,
                limit: 10,
                currentPage: 1,
            }
        },
        methods:{
            onSelect:function(){

                if(this.loading === true){
                    this.$message('已在查询，请勿重复点击')
                }

                this.loading = true;
                let that = this;
                this.$http.post('/orderList',{page: this.currentPage,limit: this.limit}).then(function(res){
                    that.tableData = res.data.tableData.list
                    that.total = res.data.tableData.total
                    setTimeout(function(){
                        that.loading = false;
                    },500)
                })
            },
            handleClick:function(row){
                this.$message('第'+row.Id+'行')
                // console.log(this.currentPage)
            },
            exportExcel:function(){
                require.ensure([],()=>{
                    const { export_json_to_excel } = require('vendor/Export2Excel')
                    const tHeader = ['ID','订单号','名称']
                    const filterVal = ['Id','orderId','name']
                    const list = this.tableData
                    const data = this.formatJson(filterVal,list)
                    export_json_to_excel(tHeader,data,'列表excel')
                })
            },
            formatJson:function(filterVal,jsonData){
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
            deleteClick:function(row){
                
                for(var i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].Id == row.Id){
                        if(this.tableData.splice(i,1).length != 0){
                            this.total -= 1
                        }
                        this.$message('删除第'+(i+1)+'行')
                        return
                    }
                }
            },
            currentChange: function(page){
                this.loading = true;
                this.currentPage = page
                let that = this;
                this.$http.post('/orderList',{page: this.currentPage,limit: this.limit}).then(function(res){
                    that.tableData = res.data.tableData.list
                    that.total = res.data.tableData.total
                    setTimeout(function(){
                        that.loading = false;
                    },500)
                })
            },
            prev: function(page){
                this.currentPage = page
            },
            next: function(page){
                this.currentPage = page
            }
        }
    }
</script>